<%--
Created by IntelliJ IDEA.
User: 14533
Date: 2021/11/2
Time: 10:00
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			<link rel="stylesheet" href="css/amazeui.min.css">
		<link rel="stylesheet" href="css/admin.css">
		<link rel="stylesheet" href="css/app.css">
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
		<style>
			.admin-main{
				padding-top: 0px;
			}
			.am-form-group{
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		
		<div class="am-cf admin-main">
			<!-- content start -->
			<div class="admin-content">
				<div class="admin-content-body">
					<div class="am-g">
						<form class="am-form am-form-horizontal" action="addNote" method="post" style="padding-top: 30px;" target="_parent">
							<input value="${emp.eid}" name="eid" type="hidden">
							<input value="${emp.position}" name="position" type="hidden">
							<div class="am-form-group">
								<label for="user-name" class="am-u-sm-3 am-form-label">
									申请人
								</label>
								<div class="am-u-sm-9">
									<input id="roleName" required="" placeholder="获取申请人姓名" value="${emp.realname}" name="realname" type="text">
								</div>
							</div>
							<div class="am-form-group">
								<label for="title" class="am-u-sm-3 am-form-label">
									请假标题
								</label>
								<div class="am-u-sm-9">
									<input type="text" name="title" placeholder="请输入请假标题"/>
								</div>
							</div>
							<div class="am-form-group">
								<label for="context" class="am-u-sm-3 am-form-label">
									请假原因
								</label>
								<div class="am-u-sm-9">
									<textarea rows="" cols="50" placeholder="请输入请假原因" name="context"></textarea>
								</div>
							</div>
							<div class="am-form-group">
								<label for="user-name" class="am-u-sm-3 am-form-label">
									开始时间
								</label>
								<div class="am-u-sm-9">
									<div class="data">
										<div class="input-group date">
											<div class="input-group-addon">
												<i class="fa fa-calendar"></i>
											</div>
											<input type="text" name="startdate" onblur="setLength()" placeholder="请输入请假开始时间"
												   class="form-control pull-right" id="startDate">
										</div>
									</div>
								</div>
							</div>
							<div class="am-form-group">
								<label for="user-name" class="am-u-sm-3 am-form-label">
									结束时间
								</label>
								<div class="am-u-sm-9">
									<div class="data">
										<div class="input-group date">
											<div class="input-group-addon">
												<i class="fa fa-calendar"></i>
											</div>
											<input type="text" name="enddate" onblur="setLength()" placeholder="请输入请假结束时间"
												   class="form-control pull-right" id="endDate">

										</div>
									</div>
								</div>
							</div>
							<div class="am-form-group">
								<label for="length" class="am-u-sm-3 am-form-label">
									请假时长
								</label>
								<div class="am-u-sm-9">
									<input type="text" id="length" name="length" placeholder="请假时长"/>
								</div>
							</div>
							<div class="am-form-group">
								<div class="am-u-sm-9 am-u-sm-push-3">
									<input id="addRole" class="am-btn am-btn-success" value="申请请假" type="submit">
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.11.3.min.js"></script>
		<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
		<script src="plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
		<script>

			function setLength(){
				var startdate = $("#startDate").val();
				var enddate = $("#endDate").val();
				if(startdate!="" && enddate!=""){
					var length = getDaysBetween(startdate, enddate);
					$("#length").val(length);
				}
			}
			$(document).ready(function() {
				$('#startDate').datepicker({
					autoclose: true,
					language: 'zh-CN'
				});
				$('#endDate').datepicker({
					autoclose: true,
					language: 'zh-CN'
				});

			});
			/**
			 * 计算两个日期之间的天数
			 * @param dateString1  开始日期 yyyy-MM-dd
			 * @param dateString2  结束日期 yyyy-MM-dd
			 * @returns {number} 如果日期相同 返回一天 开始日期大于结束日期，返回0
			 */
			function  getDaysBetween(dateString1,dateString2){
				var startDate = Date.parse(dateString1);
				var endDate = Date.parse(dateString2);
				if (startDate>endDate){
					return -1;
				}
				if (startDate==endDate){
					return 1;
				}
				var days=(endDate - startDate)/(1*24*60*60*1000) + 1;
				return days;
			}
		</script>
	</body>
</html>
